/**
 * 试卷规则详情
 */
<template>
    <el-form v-loading="loading" :model="formData" :rules="currentFormTrainingNeedss" ref="formRef" label-width="140px" :scroll-to-error="true">
        <vp-card>
            <template #header>
                <vp-label zh="基本信息" en="Basic Info" />
            </template>
            <el-row>
                <vp-col :span="4">
                    <el-form-item prop="bh">
                        <template #label><vp-label zh="记录单号" en="Record No." align="left" /></template>
                        <el-input v-model="formData.bh" v-if="type == 'add' || type == 'edit' || type == 'revision'" v-trim disabled placeholder="无需填写,由系统自动生成"
                            maxlength="100">
                        </el-input>
                        <span v-else>{{ formData.bh }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="kcid">
                        <template #label><vp-label zh="课程编号" en="Course No."/></template>
                        <el-input v-model="formData.course.bh" readonly v-if="type === 'add' || type === 'edit'">
                            <template #append>
                                <el-button @click="handleChooseCourse"><SvgIcon name="ele-Search" /></el-button>
                            </template>
                        </el-input>
                        <span v-else>{{formData.course.bh}}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="mcZw">
                        <template #label><vp-label zh="课程名称(中)" en="Couse Name" align="left"/></template>
                        <span>{{ formData.course.mcZw }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="mcYw">
                        <template #label><vp-label zh="课程名称(英)" en="Course EN Name" align="left"/></template>
                        <span>{{ formData.course.mcYw }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="4">
                    <el-form-item prop="acTypeList">
                        <template #label><vp-label zh="适用机型" en="Applicable AC Type" align="left"/></template>
                        <span v-for="(item, index) in formData.course.acTypeList" :key="index">
                            <el-tag> {{ item }} </el-tag>&nbsp;
                        </span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="kclb">
                        <template #label><vp-label zh="课程类别" en="Couse Category" align="left"/></template>
                        <span>{{ formData.course.kclb }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="fsbs">
                        <template #label><vp-label zh="初/复训" en="Initial/Retraining" align="left" /></template>
                        <el-radio-group v-model="formData.fsbs" :disabled="type!='add' && type!='edit' ">
                            <el-radio :label="10" :key="10">{{ "初训/Initial" }}</el-radio>
                            <el-radio :label="20" :key="20">{{ '复训/Retraining' }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <div style="display: flex;">
                        <el-form-item prop="xkkrq" style="flex: 2;">
                            <template #label><vp-label zh="需开课时间" en="Required Time" align="left" /></template>
                            <el-date-picker v-if="type === 'add' || type === 'edit'" style="width: 100%;" v-model="formData.xkkrq" type="date" value-format="YYYY-MM-DD"></el-date-picker>
                            <span v-else>{{ formData.xkkrq + " " + formData.xkksj }}</span>
                        </el-form-item>
                        <el-form-item prop="xkksj" label-width="0" style="flex: 1;">
                            <template #label><vp-label zh="" en="" align="left" /></template>
                            <el-time-picker v-if="type === 'add' || type === 'edit'" style="width: 100%;margin-bottom: 18px;" v-model="formData.xkksj" value-format="HH:mm:ss"></el-time-picker>
                        </el-form-item>
                    </div>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="sqyy">
                        <template #label><vp-label zh="申请原因" en="Reason"/></template>
                        <el-input 
                            type="textarea" 
                            v-model="formData.sqyy" 
                            maxlength="1000" 
                            :autosize="{ minRows: 4}"
                            v-if="isEditPage"
                        >
                        </el-input>
                        <span v-else style="white-space:pre">{{ formData.sqyy }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="2">
                    <el-form-item prop="needsPersons">
                        <template #label><vp-label zh="培训人员" en="Trainees"/></template>
                        <el-input readonly v-model="trainingParticipantDesc" v-if="type === 'add' || type === 'edit'">
                            <template #append>
                                <el-button @click="handleChooseTrainer"><SvgIcon name="ele-Search"/></el-button>
                            </template>
                        </el-input>
                        <span v-else>{{ trainingParticipantDesc }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row v-if="type=='confim' || (type=='view' && formData.jsbs) || type=='audit'">
                <vp-col :span="2">
                    <el-form-item prop="jsbs">
                        <template #label><vp-label zh="是否接受" en="Acceptance" align="left" /></template>
                        <el-radio-group v-model="formData.jsbs" :disabled="type!='confim'">
                            <el-radio :label="10" :key="10">{{ "是/Yes" }}</el-radio>
                            <el-radio :label="20" :key="20">{{ '否/No' }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row v-if="type=='confim' || (type=='view' && formData.jssm) || type=='audit'">
                <vp-col :span="1">
                    <el-form-item prop="jssm">
                        <template #label><vp-label zh="说明" en="Note"/></template>
                        <el-input 
                            type="textarea" 
                            v-model="formData.jssm" 
                            maxlength="1000" 
                            :autosize="{ minRows: 4}"
                            v-if="type=='confim'"
                        >
                        </el-input>
                        <span v-else style="white-space:pre">{{ formData.jssm }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <VpFileListCard :attachmentList="formData.attachments" @attachmentListEmit="getAttachmentListEmit($event, formData)"
                    :readOnly="!(isEditPage)">
                    <template #header>
                        <vp-label zh="附件" en="Attachment" />
                    </template>
                </VpFileListCard>
            </el-row>
        </vp-card>

        <!-- 课程单选页面 -->
		<VpCourseDialog ref="vpCourseDialogRef" @confirm="handleCourseConfirmed"></VpCourseDialog>
        <!-- 人员选择页面 -->
        <VpUserDialog ref="vpUserDialogRef"></VpUserDialog>
    </el-form>
</template>
<script setup lang="ts" name="examTrainingNeeds">
import { ref, defineAsyncComponent, computed, onMounted } from 'vue';
import validateUtils from '/@/utils/validateUtils';

const VpCourseDialog = defineAsyncComponent(() => import('/@/components/vp/course/VpCourseDialog.vue'));
const VpUserDialog = defineAsyncComponent(() => import('/@/components/vp/user/VpUserDialog.vue'));
import VpFileListCard from '/@/components/vp/file/VpFileListCard.vue';

const emits = defineEmits(['formSubmited']);
const props = defineProps({
    // 页面类型
	type: {
		type: String,
		default: 'add',
	},
	// 加载状态
	loading: {
		type: Boolean,
		default: false,
	},
	// 开启验证
	enableValid: {
		type: Boolean,
		default: true,
	},
});
const formData = ref({
    id:"",
    zt:10,
    bh:"",
    kcid:"",
    fsbs:"",
    xkkrq:"",
    xkksj:"",
    sqyy:"",
    jsbs:"",
    jssm:"",
    fjglid:"",
    course: {},
    attachments: []
});
const formTrainingNeedss = {
    kcid:[ validateUtils.notNull ],
    kcbh:[ validateUtils.notNull ],
    fsbs:[ validateUtils.notNull ],
    xkkrq:[ validateUtils.notNull ],
    sqyy:[ validateUtils.notNull ],
    needsPersons:[ validateUtils.notNull ],
}

const formTrainingNeedss1 = {
    jsbs:[ validateUtils.notNull ],
}

// 页面验证规则
const currentFormTrainingNeedss = computed(() => {
    if (!props.enableValid) {
        return {};
    }
    if (isEditPage.value) {
        return formTrainingNeedss;
    } else if(props.type == 'confim' ){
        return formTrainingNeedss1
    }
    return {};
})

const formRef = ref();

// 是否是编辑页面
const isEditPage = computed(() => {
    return props.type === 'add' || props.type === 'edit';
});


// 清空数据
const initFormData = ()=>{
    formData.value = {
        id:"",
        zt:10,
        bh:"",
        kcid:"",
        fsbs:"",
        xkkrq:"",
        xkksj:"",
        sqyy:"",
        jsbs:"",
        jssm:"",
        fjglid:"",
        course: {},
        attachments: []
    }
}

// 回显数据
const setData = (data: any) => {
    initFormData();
    formData.value = {
        ...formData.value,
        ...data,
    };
    if(formData.value.course){
        let course = formData.value.course;
        formData.value.course.acTypeList = course.acTypes?course.acTypes.map(item => {return item.jx}):[];
    }
}

/**
 * 获取数据
 */
const getData = (zt:number): Promise<any>=>{
    let promise = new Promise((resolve, reject) => {
        if (zt === 10) {
            resolve({
                ...formData.value,
            });
            return;
        }
        formRef.value.validate((valid: boolean) => {
            const data = {
                ...formData.value,
            };
            if (valid) {
                resolve(data);
            } else {
                reject();
            }
        })
    })
    return promise;
}

// 打开课程选择弹窗
const vpCourseDialogRef = ref();
const handleChooseCourse = () => {
    vpCourseDialogRef.value.handleOpen({
        selectedId: formData.value.kcid,
    });
}

// 课程选择完成
const handleCourseConfirmed = (course: any) => {
    formData.value.kcid = course.id;
    formData.value.course = course
    formData.value.course.acTypeList = course.acTypes?course.acTypes.map(item => {return item.jx}):[];
}


// 选择培训人员
const vpUserDialogRef = ref();
const handleChooseTrainer = ()=>{
    vpUserDialogRef.value.handleOpen({
        type: 2, // 1、选择人员t_user 2、选择档案b_p3_001
        multi: true,    // 是否多选
        selected:  (formData.value.needsPersons || []).map((obj: any) => { return obj.rydaid }), // 默认选中人员id
        callback: (data: any) => {
            formData.value.needsPersons = data.map((row: any) => {
                return {
                    rydaid: row.daid,
                    ryxm: row.xm
                };
            });

            console.info(formData.value.needsPersons, 123456);
        }
    });
}

const getAttachmentListEmit = (list: any, row: any) => {
  row.attachments = list;
}

// 培训人员姓名
const trainingParticipantDesc = computed(() => {
    let desc = '';
    const list = formData.value.needsPersons;
    if (list && list.length > 0) {
        desc = "已选择"+list.length+"人 " + list.map((trainee)=>{return trainee.ryxm}).join(', ');
    } 
    return desc;
});

defineExpose({
    setData,
    getData,
})

</script>
<style scoped lang="scss">
</style>